<template>
  <div class="bottom-view">
     <el-card class="view">
      <template #header>关键词搜索</template>
       <div class="search-body">
         <div class="chart-wrap">
           <div class="chart">
             <div class="title">搜索用户数</div>
              <div class="count">{{lineData.totalUser | numberFormat}}</div>
              <v-echarts :options="getOptions ('userList')" autoresize/>
           </div>
           <div class="chart">
             <div class="title">搜索用户数</div>
              <div class="count">{{lineData.totalCount | numberFormat}}</div>
               <v-echarts :options="getOptions ('countList')" autoresize/>
           </div>
         </div>
          <el-table :data="tableData" row-key="no" >
            <el-table-column prop="no" label="排行" />
            <el-table-column prop="word" label="关键字" />
            <el-table-column prop="count" label="搜索数量" />
            <el-table-column prop="user" label="搜索用户数" />
            <el-table-column prop="percent" label="搜索占比" />
          </el-table>
          <el-pagination
            :current-page.sync="currentPage"
            :page-size="pageSize"
            layout=" prev, pager, next"
            :total="totalTableData.length"
          style="margin-top: 10px;text-align: right;"
            >
          </el-pagination>
       </div>
     </el-card>
     <el-card class="view">
        <template #header>
          <div>分类销售排行</div>
          <el-radio-group v-model="radioselect" style="margin-right: 10px" size="small">
            <el-radio-button label="品类" ></el-radio-button>
            <el-radio-button label="排行"></el-radio-button>
          </el-radio-group>
        </template>
        <v-echarts :options="getPieOptions()" style="height:450px" autoresize/>
     </el-card>
  </div>
</template>

<script>
import { mapState } from "vuex"
export default {
name:"BottomView",
data () {
  return {
    radioselect:"品类",
    currentPage:1,
    pageSize:5
  }
},
computed: {
   /* 
   左侧数据
    "searchWord": [
      {
        // 地区
      "word": "北京",
      // 搜索量
      "count": 3440,
      // 用户数
      "user": 1626
    }]
    右侧数据
    "saleRank": {
      "category": {
        "axisX": ["粉面粥店", "简餐便当", "汉堡披萨", "香锅冒菜", "小吃炸串", "地方菜系", "轻食简餐"],
        "data1": [56, 52, 95, 41, 30, 69, 63]
      },
      "goods": {
        "axisX": ["草莓", "甘蔗", "榴莲", "菠萝", "香蕉", "梨", "苹果"],
        "data1": [68, 15, 41, 56, 70, 25, 31]
      }
    }
    */
  ...mapState({
    searchWord:state=>state.data.reportData.searchWord,
    saleRank: state => state.data.reportData.saleRank,
  }),
  // 将需要的数据进行整合,当数据请求回来后,添加到整合的数据中去
  lineData () {
    
    const data ={
      // 总用户数
      totalUser:0,
      // 总点击量
      totalCount:0,
      // x轴
      wordList:[],
      // 左侧y轴
      userList:[],
      // 右侧y轴
      countList:[]
    }
    if(this.searchWord){
     this.searchWord.forEach(item=>{
        data.totalUser+= item.user
        data.totalCount+= item.count
        data.wordList.push(item.word)
        data.userList.push(item.user)
        data.countList.push(item.count)
     })
    }
    return data
  },
  // 整理数据并且添加需要的数据,最终组成一个新的数组
  totalTableData(){
    if(!this.searchWord) return []
    return this.searchWord.map((item, index)=>{
      return {
        ...item, 
        no:index+1,
        percent:(item.user * 100 /  item.count).toFixed(2) + "%"

      }
    })
  },
  // 过滤,分页器用于显示当前列表的搜索对象数组 , 从totalTableData中过滤
  tableData(){
    const {currentPage , pageSize , totalTableData} = this
    // return totalTableData.filter((item, index)=>{
    //   return index >= (currentPage - 1) * pageSize && index <= currentPage * pageSize -1
    // })
    return totalTableData.slice((currentPage - 1) * pageSize, currentPage*pageSize)

  },
  // 处理饼图数据 , 分析数据,将需要的数据提取出来,整合到一起
  // {
  //   name:"分娩粥店 | 12.03%",
  //   value:68,
  //   percent: "12.03%"
  //   labelName:"分娩粥店"
  // }
  pieData () {
    const data = {
      categoryList: [],
      goodsList: [],
    }
    const {saleRank} = this
    if(saleRank) {
      // 深度结构 解构别名别名  将数据从对象中拿出来
      const {category: {axisX,data1}, goods:{axisX : axisX2,data1: data2}} = saleRank
    // { axisX , data1 , axisX2 , data2}
    // data1的总和,为了后面计算百分比
    const total = data1.reduce((pre,item)=>pre+ item,0)
  // 总数在饼图中也要用到,所以变成一个属性,将属性添加到data.categoryList
    data.categoryList.total=total
    
    axisX.forEach((item,index)=>{
      const percent =( data1[index] * 100 /total).toFixed(2) + "%"
      data.categoryList.push({
         name:item+ "|" + percent,
          value:data1[index],
          percent,
          labelName:item
      })
    })
    // data1的总和,为了后面计算百分比
    const total2 = data2.reduce((pre,item)=>pre+ item,0)
  // 总数在饼图中也要用到,所以变成一个属性,将属性添加到data.categoryList
    data.goodsList.total=total2
    
    axisX2.forEach((item,index)=>{
      const percent =( data2[index] * 100 /total2).toFixed(2) + "%"
      data.goodsList.push({
         name:item+ "|" + percent,
          value:data2[index],
          percent,
          labelName:item
      })
    })
    }
    return data
  }
},
methods:{
  getOptions (dataName) {
    const data=this.lineData[dataName]
    const xAxisData = this.lineData.wordList
    return {
        // x轴
        xAxis: {
          show: false,
          data:xAxisData,
         
        },
        // y轴
        yAxis: {
          show: false,
        },
        // 系列
        series:[
          {
            type:"line",
            data,
           areaStyle: {
             color:"#D8EEF"
           },
           itemStyle: {
             opacity:0
           },
           lineStyle: {
             color:"#6cc1ff"
           },
           smooth: true
            
          }
        ],
        // 提示
        tooltip: {
          trigger:"axis"
        },
        // 网格
        grid: {
          left: 0,
          top:0,
          bottom:0,
          right:0,
        },
        // 颜色
        // color: "yellowGREEN"
      }
  },
  getPieOptions(){
    const text = this.radioselect + "分布"
    const data=this.radioselect === "品类" ? this.pieData.categoryList : this.pieData.goodsList;
    return {
      title:[
        {
        text,
        textStyle: {
          fontSize:16
        }
      },
      {
        text:"累积订单量",
        subtext:data.total,
        left:"29%",
        top:"45%",
        textAlign:"center",
        textStyle: {
          fontSize:14,
          color:"#999"
        },
        subtextStyle:{
          fontSize:20,
          color:"#333"
        }
      }
      ],
       tooltip: {
        trigger: 'item',
         formatter(params) {
          //  marker / data / serierName 
          const {marker,data:{value,percent,labelName},serierName} = params;
              return `
              ${serierName}<br>
              ${marker}${labelName}<br> 
              ${marker}${value}<br> 
              ${marker}${percent}<br> 
              `
          }
      },
      // 图例
      legend: {
        // 图例排列方式
        origin:"vertical",
        top: '35%',
        left: '75%'
      },
      series: [
        {
          name: text,
          type: 'pie',
          // 饼图位置
          center:["30%","50%"],
          // 饼图大小
          radius: ['30%', '45%'],
          itemStyle: {
            borderRadius: 10,
            // 指定空隙颜色
            borderColor: '#fff',
            // 间隙颜色
            borderWidth: 2
          },
          label: {
            formatter(params) {
              return params.data.labelName
            }
          },
        //  引导线
          labelLine: {
            length:10,
            length2:10
          },
          data
        }
      ]
    }
  }
}
}
</script>

<style lang="scss" scoped>
.bottom-view {
  margin-top: 20px;
  display: flex;
  .view {
    flex: 1;
    &:first-child {
      margin-right: 10px;
    }
    &:last-child {
      margin-left: 10px;
    }
    ::v-deep.el-card__header{
      display: flex;
      align-items: center;
      justify-content: space-between;
      height:50px;
    }
  }
  .search-body {
    height: 450px;
    .chart-wrap {
      display: flex;
      .chart {
        flex: 1;
        &:first-child {
          margin-right: 5px;
        }
        &:last-child {
          margin-left: 5px;
        }
        .title {
          color: #999;
        }
        .count {
          font-size: 25px;
          letter-spacing:2px;
        }
        .echarts {
          height:50px;
        }
      }
    }
  }
}
</style>